<template>
  <div class="content">
    <img :src="movie.poster" alt="电影海报" class="movie-poster" />
    <div class="xq">
      <h2>{{ movie.title }}</h2>
      <h5>评分：{{ movie.rating }}</h5>
      <h5>类型:{{ movie.type }}</h5>
      <h5>{{ movie.duration }}</h5>
    </div>
  </div>
  <!-- 更多电影详情信息 -->
  <br />

  <div class="jj">
    <v-card-title>电影简介</v-card-title>
    <v-card-text>
      <p>{{ movie.synopsis }}</p>
    </v-card-text>
  </div>
  <br />

  <div class="comments-container">
    <el-input
      v-model="newComment"
      type="textarea"
      :rows="4"
      placeholder="请输入您的留言"
      class="comment-input"
    />
    <el-button type="primary" @click="addComment" class="submit-button">
      提交留言
    </el-button>

    <el-divider content-position="left">留言列表</el-divider>

    <el-timeline>
      <el-timeline-item
        v-for="(comment, index) in comments"
        :key="index"
        :timestamp="comment.timestamp"
        placement="top"
      >
        <el-card>
          <h4>{{ comment.content }}</h4>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="deleteComment(index)"
            class="delete-button"
          ></el-button>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
  <br />

  <div class="dialog-footer">
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="addToCart">添加到购物车</el-button>
  </div>
</template>
  
  <script>
export default {
  name: "MovieDetail",

  data() {
    return {
      dialogVisible: false,
      movie: {},
      newComment: "", // 新留言内容
      comments: [], // 留言列表
    };
  },
  mounted() {
    const movieData = this.$route.query;
    this.movie = movieData;
    // 从localStorage加载留言
    this.loadComments();
    // 使用movieData对象中的数据
    console.log(
      movieData.id,
      movieData.title,
      movieData.poster,
      movieData.rating,
      movieData.synopsis,
      movieData.type,
      movieData.duration
    );
  },
  methods: {
    show() {
      this.dialogVisible = true;
    },
    addToCart() {
      // 实现添加到购物车的逻辑
      this.$emit("add-to-cart", this.movie);
      this.$router.push({
        name: "buy",
        query: {
          movieId: this.movie.id,
          movieTitle: this.movie.title,
          moviePoster: this.movie.poster,
          movieRating: this.movie.rating,
          movieSynopsis: this.movie.synopsis,
          movieType: this.movie.type,
          movieDuration: this.movie.duration,
        },
      });
      this.dialogVisible = false;
    },
    addComment() {
      // 检查留言是否为空
      if (this.newComment.trim() === "") {
        return;
      }
      // 创建留言对象
      const comment = {
        content: this.newComment,
        timestamp: new Date().toLocaleString(), // 获取当前时间作为留言时间
      };
      // 将新留言添加到留言列表中
      this.comments.push(comment);
      // 保存留言到localStorage
      this.saveComments();
      // 清空输入框
      this.newComment = "";
    },
    saveComments() {
      // 将留言列表转换为字符串并保存到localStorage
      localStorage.setItem("movieComments", JSON.stringify(this.comments));
    },
    loadComments() {
      // 从localStorage加载留言列表
      const storedComments = localStorage.getItem("movieComments");
      if (storedComments) {
        this.comments = JSON.parse(storedComments);
      }
    },
    deleteComment(index) {
      // 从comments数组中删除指定索引的留言
      this.comments.splice(index, 1);
      // 更新localStorage中的留言数据
      this.saveComments();
    },
  },
};
</script>
  
<style scoped>
.content {
  display: flex;
  margin-left: 100px;
}

.xq {
  margin-left: 100px;
}

.jj {
  margin-left: 100px;
  text-align: left;
}
.jj v-card-title,
.jj v-card-text p {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  text-align: left;
}
.movie-poster {
  height: 369px;
  width: 274px;
  margin-left: 100px;
}

.comments-container {
  margin: 20px;
  text-align: center; /* 添加这一行以使容器内的按钮居中 */
}

.comment-input {
  margin-bottom: 20px;
}

.submit-button,
.dialog-footer .el-button {
  display: inline-block; /* 确保按钮是内联块元素 */
  margin: 0 10px; /* 添加左右外边距 */
}

.el-timeline {
  margin-top: 20px;
}

.el-timeline-item {
  margin-bottom: 20px;
}

.el-card {
  border-radius: 4px;
}

.el-card h4 {
  margin: 0;
  font-size: 16px;
}

.el-divider {
  margin: 20px 0;
}

.delete-button {
  float: right;
  margin-top: -20px;
}

.dialog-footer {
  text-align: center; /* 添加这一行以使容器内的按钮居中 */
}
</style>
